<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue.js"></script>
</head>
<!--
        几个注意点：
1.关于组件名:
 一个单词组成：
  第一种写法(首字母小写)：school
   第二种写法(首字母大写)：School

 多个单词组成：
   第一种写法(kebab-case命名)：my-school
   第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
   备注：
    (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
     (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

 2.关于组件标签:
 第一种写法：<school></school>
  第二种写法：<school/>
   备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

 3.一个简写方式：直接是配置对象
  const school = Vue.extend(options) 可简写为：const school = options
    -->
<body>
    <div id="root">
        <h2>{{msg}}</h2>
        <school></school>
        <br>
<!--        自闭和()-->
        <school/>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    //创建组件
    const school = Vue.extend({
        //定义名字防止错乱
        name:'atiguigu',
        template:`
				<div>
					<h2>学校名称：{{name}}</h2>
					<h2>学校地址：{{address}}</h2>
				</div>
			`,
        data(){
            return{
                name:'尚硅谷',
                address:'北京'
            }
        }
    })

    new Vue({
        el:'#root',
        data:{
            msg:'VUE'
        },
        components:{
            //组件名，相同可以简写 school
            school:school
        //    多个单词用-分开  例如 my-school 但要用引号
        //    或者每个的单词的首字母大写,但必须要有脚手架
        }
    })
</script>
</html>
<script>
</script>